﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/MyMasterPage.cshtml";
}
@using YiSha.Entity.OrganizationManage;
@{
    MyEntity my = ViewBag.Mylist;
}
<style>

    .swiper-container1 {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-pagination1 {
        position: absolute;
        z-index: 2;
        margin: 550px auto 0px auto;
        text-align: center;
    }

        .swiper-pagination1 .swiper-pagination-bullet {
            width: 100px;
            height: 5px;
            border-radius: inherit;
            margin-left: 5px;
        }

    .swiper-container2 {
        margin: 20px auto;
    }
</style>
<div id="index">

    <!-- Swiper -->
    <div class="swiper-container1">
        <div class="container">
            <div class="swiper-pagination1 container"></div>

        </div>
        <div class="swiper-wrapper">

            <div class="swiper-slide slider-bg d-flex align-items-center" v-for="item in bannerList" :style="{backgroundImage: 'url(' + item.BnImage + ')'}">

                <div class="container" v-if="item.BnContent=='左'">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-5 offset-xl-7">
                                <div class="slider-content">
                                    <h2 class="text-accent-color letter-spacing-n05px" data-animation="fadeInDown" data-delay=".2s"><span>{{item.BnTitle}}</span><br><h3>{{item.BnSubtitle}}</h3></h2>
                                    <p class="text-dark" data-animation="fadeInLeft" data-delay=".4s">{{item.BnRemark}}</p>
                                    <div class="price-area" data-animation="fadeInUp" data-delay=".6s">
                                        <div class="price-col">
                                            <h3>{{item.BnT1}}</h3>

                                        </div>

                                    </div>
                                    <a :href="item.BnUrl" target="_blank" class="button button-sliding-icon" data-animation="fadeInUp" data-delay=".8s">点击查看<i class="fa fa-angle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container" v-else>
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="slider-content">
                                <h2 class="text-accent-color letter-spacing-n05px" data-animation="fadeInUp" data-delay=".2s"><span>{{item.BnTitle}}</span><br><h3>{{item.BnSubtitle}}</h3></h2>
                                <p class="text-dark" data-animation="fadeInLeft" data-delay=".4s">{{item.BnRemark}}</p>
                                <div class="price-area" data-animation="fadeInUp" data-delay=".6s">
                                    <div class="price-col">
                                        <h3>{{item.BnT1}}</h3>
                                    </div>

                                </div>
                                <a :href="item.BnUrl" class="button button-sliding-icon" data-animation="fadeInUp" data-delay=".8s">点击查看<i class="fa fa-angle-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


        </div>
        <!-- Add Pagination -->


    </div>
    <!-- cars-area -->
    <section class="light-section section-block">

        <div class="section-space"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 section-title-wrapper">
                    <h3 class="section-title">产品展示</h3>
                    <p>Discover all the features of our vehicles.</p>
                </div>
            </div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in productList">
                    <div class="car">
                        <a :href="productUrl+item.Id"><img :src="item.CoverImage" /></a>
                        <div class="car-description">

                            <h5 class="car-name"><a href="#">{{item.MotoTitle}}</a></h5>

                            <div class="car-area">

                                <div class="car-price">
                                    ${{item.MotoPrice}}
                                </div>

                                <div class="tech">
                                    <span><i class="fa fa-gears" title="Motor power"></i> <small>{{item.MotoPailiang}}</small> </span>
                                    <span><i class="fa fa-dashboard" title="0 - 100 km / h acceleration"></i> <small>{{item.MotoJiasu}}</small> </span>
                                    <span><i class="fa fa-motorcycle" title="Fuel consumption"></i> <small>{{item.MotoZhiliang}}</small> </span>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

    <!-- news-area -->
    <section class="white-section section-block">

        <div class="section-space"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 section-title-wrapper">
                    <h3 class="section-title">新闻中心</h3>
                    <p>了解我们公司的所有信息。</p>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-6 col-xs-12" v-for="item in newsList.slice(0,2)">
                    <article class="post-entry">
                        <div class="post-image">
                            <a :href="newsUrl+item.Id">
                                <img width="600" height="430" :src="item.ThumbImage" />
                                <span class="filter-grayscale"></span>
                            </a>
                        </div>
                        <div class="post-content">
                            <h4 class="post-title"><a :href="newsUrl+item.Id">{{item.NewsTitle}}</a></h4>
                            <ul class="post-tags">
                                <li>{{item.BaseModifyTime}}</li>

                            </ul>
                            <div class="description">
                                <p>
                                    {{item.NewsTag}}
                                </p>
                            </div>
                        </div>
                    </article>
                </div>

            </div>
            <div class="row">
                <div class="col-md-4 col-xs-12" v-for="item in newsList.slice(2,5)">
                    <article class="post-entry margin-bottom-0">
                        <div class="post-image">
                            <a :href="newsUrl+item.Id">
                                <img width="600" height="430" :src="item.ThumbImage" />
                                <span class="filter-grayscale"></span>
                            </a>
                        </div>
                        <div class="post-content">
                            <h4 class="post-title"><a :href="newsUrl+item.Id">{{item.NewsTitle}}</a></h4>
                            <ul class="post-tags">
                                <li>{{item.BaseModifyTime}}</li>

                            </ul>

                        </div>
                    </article>
                </div>

            </div>
        </div>

    </section>

    <!-- counter-area -->
    <section class="counters white-section section-block">

        <div class="big-space"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 section-title-wrapper text-center">
                    <h3 class="section-title">让数字为我们说话</h3>
                    <p>
                        我们坚信，产品是服务于人和生活的，体验是能够不断优化的。
                        从第一台奔达的第一次启动，到每一公里的骑行数据都会被铭记。根据这些骑行数据，我们不断优化产品线的分布，满足人们的出行生活；不断改进每一个细节，优化产品的体验；不断发现真正的需求，改变出行的场景。
                        每一公里都不会被遗忘，每一点努力都意义非凡，是科技，让每一公里都算数
                    </p>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="number col-md-4 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".3s">
                    <div class="numbers">
                        <div class="num-icon">
                            <i class="fa fa-handshake-o"></i>
                        </div>
                        <div class="num-content">
                            <h4 class="num-heading"><span class="accent" data-speed="3000" data-to="@my.MyWangdian" data-inviewport="yes">@my.MyWangdian</span>+</h4>
                            <h5><strong>服务网点</strong><br>合作厂商</h5>
                        </div>
                    </div>
                </div>
                <div class="number col-md-4 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".6s">
                    <div class="numbers">
                        <div class="num-icon">
                            <i class="fa fa-group"></i>
                        </div>
                        <div class="num-content">
                            <h4 class="num-heading"><span class="accent" data-speed="3000" data-to="@my.MyUsers" data-inviewport="yes">@my.MyUsers</span></h4>
                            <h5><strong>用户</strong> <br>奔达忠实用户</h5>
                        </div>
                    </div>
                </div>
                <div class="number col-md-4 col-sm-12 col-xs-12 wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".9s">
                    <div class="numbers">
                        <div class="num-icon">
                            <i class="fa fa-home"></i>
                        </div>
                        <div class="num-content">
                            <h4 class="num-heading"><span class="accent" data-speed="3000" data-to="@my.MyFuwushang" data-inviewport="yes">@my.MyFuwushang</span></h4>
                            <h5><strong>经销商</strong><br>下线门店</h5>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="big-space"></div>

    </section>
    <!-- features-area -->
    <section class="dark-section section-block">

        <div class="section-bg" style="background-image: url('../../assets/img/parallax.jpg'); "></div>

        <div class="section-space"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 section-title-wrapper">
                    <h3 class="section-title">荣誉资质</h3>
                    <p>我们一直在进步</p>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6" v-for="item in rongyuList">
                    <article class="features-entry wow fadeInCdb" data-wow-duration="0.7s" data-wow-delay="0.2s">
                        <div class="image-holder margin-bottom-0">
                            <a :href="newsUrl+item.Id">
                                <img width="800" height="500" :src="item.ThumbImage"/>
                                <h4 class="features-title">{{item.NewsTitle}}1</h4>
                                <span class="features-overlay"></span>
                            </a>
                        </div>
                    </article>
                </div>
                
            </div>
        </div>
        <div class="section-space"></div>

    </section>

    <!-- testimonials-area -->
    <section class="light-section section-block container">
        <!-- Swiper -->

        <div class="section-space"></div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 section-title-wrapper margin-bottom-0 text-center">
                    <h3 class="section-title">网友留言</h3>
                    <p>通过设计和科技，在行业内成为全球影响力领先的自主摩托品牌。</p>
                </div>
            </div>
        </div>
        <div class="swiper-container2" style="width:500px; overflow:hidden">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in messageList">
                    <div class="review-item clearfix">
                        <div class="testimonial-box">
                            <div class="testimonial">{{item.MsContent}}</div>
                            <div class="testimonial-author">
                                <h4>{{item.MsName}}</h4>
                                <span>{{item.MsAdddatetime}}</span>
                            </div>
                        </div>
                    </div>
                </div>
               
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination2"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

    </section>

    <!-- brands-area -->
    

</div>

<script type="text/javascript">


    var vm = new Vue({
        el: "#index",
        data: {
            newsUrl: 'News/NewsDetail?id=',
            productUrl: 'Product/ProductDetail?id=',
            productList: [],
            newsList: [],
            bannerList: [],
            rongyuList: [],
            messageList:[],
        },
        mounted() {
            this.getProductList();
            this.getNewsList();
            this.getBannerList();
        },
        methods: {
            //获取列表
            getProductList() {
                var that = this
                $.ajax({
                    type: 'GET',
                    url: '/api/Moto/GetListJson',
                    data: {},
                    success: function (res) {
                        that.productList = res.Result
                        // console.log(that.productList)

                        vm.$forceUpdate();
                        setTimeout(function () {
                            that.swiper();
                        }, 50)
                    }
                });
            },
            getNewsList() {
                var that = this
                $.ajax({
                    type: 'GET',
                    url: '/api/News/GetListJson',
                    data: {},
                    success: function (res) {
                        //console.log(res.Result)
                        for (var i = 0; i < res.Result.length; i++) {
                            if (res.Result[i].NewsType == 1 || res.Result[i].NewsType == 2) {
                                that.newsList.push(res.Result[i])
                            }

                        }
                        //console.log(that.newsList)
                        //that.newsList = res.Result
                        vm.$forceUpdate();
                        //console.log(that.newsList)
                    }
                });
                //资质荣誉
                $.ajax({
                    type: 'GET',
                    url: '/api/News/GetPageListJson?pageSize=3&pageIndex=1&NewsType=4',
                    data: {},
                    success: function (res) {
                        that.rongyuList = res.Result;
                        vm.$forceUpdate();
                    }
                });
                //留言推荐
                $.ajax({
                    type: 'GET',
                    url: '/api/Message/GetPageListJson?pageSize=10&pageIndex=1&MsUid=1',
                    data: {},
                    success: function (res) {
                        that.messageList = res.Result;
                        vm.$forceUpdate();
                    }
                });
            },
            //banner列表
            getBannerList() {
                var that = this
                $.ajax({
                    type: 'GET',
                    url: '/api/Banner/GetListJson',
                    data: {},
                    success: function (res) {
                        that.bannerList = res.Result
                        vm.$forceUpdate();

                        setTimeout(function () {
                            that.swiper1();
                            that.swiper2();
                        }, 50)
                    }
                });
            },
            //轮播图swiper
            swiper() {
                var swiper = new Swiper('.swiper-container', {
                    //默认功能属性
                    speed: 500,
                    slidesPerView: 4,
                    spaceBetween: 10,
                    slidesPerGroup: 4,
                    loop: true,
                    autoplay: true,
                    //分页索引
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true
                    },
                    //分页按钮
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    }
                });
            },
            //轮播图swiper banner
            swiper1() {

                var swiper = new Swiper('.swiper-container1', {
                    pagination: '.swiper-pagination1',
                    paginationClickable: true,

                    //分页索引
                    pagination: {
                        el: ".swiper-pagination1",
                        clickable: true
                    },

                });
            },
            //轮播图swiper
            swiper2() {
                var swiper = new Swiper('.swiper-container2', {
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    pagination: '.swiper-pagination2',
                    paginationType: 'fraction',
                    //分页按钮
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    }
                });
            }
        }
    })
</script>
